<!DOCTYPE html>
<html lang="zh_CN" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>邮件管理</title>
    <header th:replace="header::html"></header>
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
       <a href="">首页</a>
            <a href="">邮件</a>
            <a>
              <cite>发送邮件</cite>
            </a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="x-body">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form" id="mailForm">
                            <input th:value='${sysMailInfo.sizeValue}' class='layui-input' type='hidden' name='sizeValue' id='sizeValue'>
                            <div class="layui-form-item" permission="sys:mail:send">
                                <button class="layui-btn layui-btn-warm" id="send" lay-submit="" lay-filter="send">
                                    <i class="layui-icon">&#xe609;</i>发送
                                </button>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">收件人：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="address" th:value="${sysMailInfo.address}"
                                           lay-verify="required" autocomplete="off" placeholder="请输入正确的邮箱地址，多个邮箱请使用英文;隔开"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">抄送人：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="cc" th:value="${sysMailInfo.cc}"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">主 题：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" th:value="${sysMailInfo.title}"
                                           lay-verify="required" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">附 件：</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-normal" id="editFile"><i
                                            class="layui-icon">&#xe67c;</i>添加附件
                                    </button>
                                    <span class="layui-word-aux">
                                        (最大
                                        <span style="color: red;">10MB</span>
                                         )
                                    </span>
                                    <div class="layui-upload-list">
                                        <p id="fileN"></p>
                                    </div>
                                </div>
                                <input type="hidden" name="annex" id="annex" th:value="${sysMailInfo.annex}" class="layui-input">
                                <input type="hidden" name="fileName" id="fileName" th:value="${sysMailInfo.fileName}" class="layui-input">
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <textarea id="mycontent" name=""></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.extend({
        tinymce: '{/}/xadmin/lib/tinymce/tinymce'
    }).use(['tinymce', 'form', 'upload', 'layer', 'jquery'], function () {
        var tinymce = layui.tinymce,
            form = layui.form,
            upload = layui.upload,
            layer = layui.layer;

        tinymce.render({
            elem: "#mycontent",
            height: 450,
            mobile: {
                theme: 'mobile'
            }
        });

        //自定义验证规则
        form.verify({
            address: function (value, item) {
                var reg = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/;
                if (!new RegExp(reg).test(value)) {
                    return '请输入正确的邮箱';
                }
            }
        });

        var loading = null;
        //文件上传
        upload.render({
            elem: '#editFile',
            url: '/fileUpload/upload',
            accept: 'file',
            exts: 'md|zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg',
            size: 1024 * 10,
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    loading = layer.load();
                    $("#fileN").html(file.name+"     大小："+(file.size/1024).toFixed(1)+"KB");
                    $("#sizeValue").val((file.size/1024).toFixed(1)+"KB");
                });
            },
            done: function (res) {
                if (res.code == 0) {
                    layer.close(loading);
                    layer.msg('上传成功');
                    $("#annex").val(res.data.src);
                    $("#fileName").val(res.data.fileName);
                } else {
                    layer.close(loading);
                    layer.msg(res.msg);
                }
            }
        });

        //监听提交
        form.on('submit(send)', function (data) {
            var loading = layer.load();
            data.field.content = tinymce.get('#mycontent').getContent();
            $.ajax({
                url: "/mail/send",
                type: "POST",
                data: data.field,
                dataType: 'json',
                success: function (result) {
                    layer.close(loading);
                    if (result.code != 200) {
                        layer.alert(result.msg);
                    } else {
                        layer.alert("发送成功", {icon: 6}, function (index) {
                            location.reload();
                        });
                    }
                }
            });
            return false;
        });
        checkPermission();
    });
</script>
</html>